<template>
  <div>
    <SearchPannelTree
      v-model="element"
      :btn-items="btnItems"
      @searchmethod="search()"
      @create="create($event)"
    />
    <CreateOrUpdate v-if="createOrUpdateVisible" ref="createorupdate" @refreshDataList="getDataList()" />
  </div>
</template>

<script>
import SearchPannelTree from '@/components/SearchPannelTree'
import { fetchAll } from '@/api/tenant'
import CreateOrUpdate from './components/CreateOrUpdate'
// eslint-disable-next-line no-unused-vars
import { treeDataTranslate, treeToArrayList, getChildNodeFromArray } from '@/utils'
import { fetchList, deleteMategroup } from '@/api/mategroup'
export default {
  components: { SearchPannelTree, CreateOrUpdate },
  data() {
    return {
      createOrUpdateVisible: false,
      element: {
        // 普通查询
        searchOperation: {
          r: fetchList,
          aftersearch: this.aftersearch,
          searchresult: ''
        },

        grid: {
          treenode: {
            prop: 'Code',
            label: '代码',
            width: ''
          },
          normalitems: [{
            prop: 'Name',
            label: '名称',
            width: ''
          }, {
            prop: 'StatusName',
            label: '审批状态',
            width: ''
          }, {
            prop: 'TenantName',
            label: '租户',
            width: ''
          }],
          operationitem: [{
            name: '同级',
            icon: 'el-icon-plus',
            method: (row) => {
              this.createsavegrid(row)
            }
          }, {
            name: '下属',
            icon: 'el-icon-plus',
            method: (row) => {
              this.createbrance(row)
            }
          }, {
            name: '修改',
            icon: 'el-icon-edit',
            show: (row) => { return row.Status === 'UnCommit' },
            method: (row) => {
              this.modify(row)
            }
          }, {
            name: '删除',
            icon: 'el-icon-delete',
            show: (row) => { return row.Status === 'UnCommit' },
            method: (row) => {
              this.delete(row)
            }
          }],
          datalist: []
        },
        // 高级搜索数据
        filters: {
          // 是否显示高级搜索
          isShow: false
          /* vueName: '测试数据',
          src: 'basedata/position/components/filter',
          data: {
            labelPosition: 'right',
            formLabelAlign: {
              name: '12313',
              region: '',
              type: ''
            }
          } */
        }
      },
      btnItems: [],
      // 功能区按钮列表
      btnsOperation: [{
        name: '新  建',
        code: 'create',
        clientevent: () => {
          this.create()
        }
      }, {
        name: '批量删除',
        code: 'batchDel',
        clientevent: () => {
          this.delete()
        }
      }]
    }
  },
  mounted() {
    // 获取租户
    fetchAll().then((data) => {
      if (data && data.code === '20000') {
        const result = data.data
        this.tenantList = result
      }
    }).then(() => {
      this.getDataList()
    })
  },
  methods: {
    getDataList() {
      // this.dataListLoading = true
      fetchList({}).then(({ data }) => {
        data.forEach((item, index) => {
          if (item.Status === 'UnCommit') {
            item.StatusName = '未提交'
          } else if (item.Status === 'Running') {
            item.StatusName = '进行中'
          } else if (item.Status === 'Finished') {
            item.StatusName = '完成'
          }
          const re = this.tenantList.filter(r => r.Id === item.Tenant)
          if (re) {
            item.TenantName = re[0].Name
          } else {
            item.TenantName = ''
          }
        })
        this.element.grid.datalist = treeDataTranslate(data, 'Id', 'Parentid')
        // this.dataListLoading = false
      // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
        // this.dataListLoading = false
      })
    },
    search() {
      this.getDataList()
    },
    createsavegrid(row) {
      this.createOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.createorupdate.init(undefined, row.Parentid, row.Tenant)
      })
    },
    createbrance(row) {
      this.createOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.createorupdate.init(undefined, row.Id, row.Tenant)
      })
    },
    create() {
      this.createOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.createorupdate.init(undefined, undefined, undefined)
      })
    },
    modify(row) {
      this.createOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.createorupdate.init(row.Id, undefined, undefined)
      })
    },
    delete(row) {
      this.$confirm(`确定对[id=${row.Id}]进行[删除]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMategroup(row.Id).then((data) => {
          if (data && data.code === '20000') {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
